import {ComponentType} from 'react'
import Taro, {Component, Config} from '@tarojs/taro'
import {View, Button, Text, Swiper, SwiperItem, Image} from '@tarojs/components'
import './packgeDetail.less'

import contactIcon from '../../assets/img/icon_contact.png'
import iconAddress from "../../assets/img/icon_address.png";
import {getCaNumber, getRuntime, servicePhoneNumber, subtime} from "../../utils/common";
import AreaStore from "../../store/AreaStore";

class PackgeDetail extends Component {

  state = {
    info: {}
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '快递详情'})
    let info = getRuntime().getStorage('orderDetail')
    console.log(info)
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        res.map(item => {
          if(item.value === info.carOrderDetails[0].province){
            info.provinceText = item.label
          }
        })
      }
    })
    this.setState({ info })
  }

  makePhone() {
    getRuntime().makePhoneCall(servicePhoneNumber)
  }

  copyLink(str: string) {
    Taro.setClipboardData({ data: str })
      .then(() => {
        getRuntime().showToast('复制成功!' )
      })
      .catch(() => {
        getRuntime().showToast('你的浏览器不支持复制功能, 请在pc端打开浏览器自动搜索该税务局!' )
      })
  }

  render() {
    let { info } = this.state
    return (
      <View className='packge-detail'>
         <View className='packge__status'>
           <View className='packge__text f32'>{info.statusView}</View>
         </View>

        <View className='line-desc'>
          <View className='line'>
            <View className='line__title'>车牌号码: </View>
            <View className='line__con'>{getCaNumber(info.carOrderDetails[0]['carNumber'])}</View>
          </View>
          <View className='line'>
            <View className='line__title'>车辆规格: </View>
            <View className='line__con'>{info.carOrderDetails[0]['carSpec']}</View>
          </View>
          <View className='line'>
            <View className='line__title'>税票类型: </View>
            <View className='line__con'>纸质税票</View>
          </View>
        </View>
        <View className='interval' />

        <View className='address-list'>
          <View className='address-list__item'>
            <Image className='address-list__icon' src={iconAddress} />
            <View className='address-list__info'>
              <View className='address-list__title f30'>{info.receiver} {info.receiverPhone}</View>
              <View className='address-list__address f24 font-dark'>{info.receiverAddress}</View>
            </View>
          </View>
        </View>
        <View className='interval' />

        <View className='line-desc'>
          <View className='line'>
            <View className='line__title'>订单号码: </View>
            <View className='line__con'>{info.orderNo}</View>
          </View>
          <View className='line'>
            <View className='line__title'>快递单号: </View>
            <View className='line__con'>
              <Text className='color-theme'>{info.shippingNo}</Text>
              <Text className='btn-copy color-theme' onClick={this.copyLink.bind(this,info.shippingNo)}>复制</Text>
            </View>
          </View>
          <View className='line'>
            <View className='line__title'>申请时间: </View>
            <View className='line__con'>{subtime(info.creationTime)}</View>
          </View>
        </View>
        <View className='interval' />

        <View className='contact' onClick={this.makePhone.bind(this)}>
          <Image className='contact__icon' src={contactIcon} />
          <View className='contact__title'>联系客服</View>
        </View>

        {/*<Button className='circular-submit'>确认收货</Button>*/}


      </View>
    )
  }
}
export default PackgeDetail
